<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="content w100">
		<template v-if="matchInfo.list.length>0">
			<view class="match-item-box" v-for="(item,index) in matchInfo.list" :key="item.id">
				<myMatchItemVue :matchInfo="item"></myMatchItemVue>
			</view>
			<view class="view-more">
				<up-loadmore :status="matchInfo.status" />
			</view>
		</template>
		<view class="not-list-view" v-else>
			<text class="text">暂无比赛数据~</text>
		</view>
	</view>
</template>

<script setup>
	import myMatchItemVue from '../components/myMatchItem.vue';
	const storeId = ref(0);
	const matchInfo = reactive({
		list: [],
		status: 'loadmore',
		pageSize: 1
	});
	onLoad((option) => {
		if (option.storeId) {
			storeId.value = option.storeId;
			getMatchList(option.storeId);
		}
	});
	onReachBottom(() => {
		getMoreList();
	});
	onPullDownRefresh(async () => {
		matchInfo.list = [];
		matchInfo.pageSize = 1;
		matchInfo.status = 'loadmore';
		await getMatchList(storeId.value);
		uni.stopPullDownRefresh();
	})
	const getMoreList = () => {
		if (matchInfo.status === 'loading' || matchInfo.status === 'nomore') return;
		matchInfo.status = 'loading';
		setTimeout(() => {
			getMatchList(storeId.value);
		}, 600)
	}
	const getMatchList = async (id) => { //获取状态啊
		const res = await $Api.match.getMatchList({
			store_id: id,
			page: matchInfo.pageSize
		}, true);
		if (res.code === 1) {
			if (res.data?.list.length > 0) {
				matchInfo.list = [...matchInfo.list, ...res.data.list]
			}
			if (res.data.totalPage && res.data.totalPage > matchInfo.pageSize) {
				matchInfo.pageSize++;
				matchInfo.status = 'loadmore';
			} else {
				matchInfo.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg);
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
	}

	.match-item-box {
		margin-bottom: 16rpx;
	}
</style>